<template>
  <div class="quality-analysis-container">
    <div class="page-header">
      <h2>质量分析</h2>
    </div>
    
    <div class="filters">
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="YYYY-MM-DD"
      />
      <el-select v-model="productId" placeholder="选择产品">
        <el-option label="全部产品" value="" />
        <el-option label="产品A" value="1" />
        <el-option label="产品B" value="2" />
        <el-option label="产品C" value="3" />
      </el-select>
      <button class="btn-primary" @click="refreshData">刷新数据</button>
    </div>
    
    <div class="charts-row">
      <div class="chart-item">
        <h3>测试通过率趋势</h3>
        <div id="passRateChart" class="chart" style="height: 300px;"></div>
      </div>
      <div class="chart-item">
        <h3>缺陷分布统计</h3>
        <div id="defectDistributionChart" class="chart" style="height: 300px;"></div>
      </div>
    </div>
    
    <div class="stats-row">
      <div class="stat-item">
        <div class="stat-value">{{ totalTestCases }}</div>
        <div class="stat-label">总测试用例</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">{{ passedCases }}</div>
        <div class="stat-label">通过用例</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">{{ failedCases }}</div>
        <div class="stat-label">失败用例</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">{{ passRate }}%</div>
        <div class="stat-label">通过率</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">{{ totalDefects }}</div>
        <div class="stat-label">总缺陷数</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">{{ openDefects }}</div>
        <div class="stat-label">未关闭缺陷</div>
      </div>
    </div>
    
    <div class="charts-row">
      <div class="chart-item">
        <h3>测试执行趋势</h3>
        <div id="executionTrendChart" class="chart" style="height: 300px;"></div>
      </div>
      <div class="chart-item">
        <h3>缺陷严重程度分布</h3>
        <div id="severityDistributionChart" class="chart" style="height: 300px;"></div>
      </div>
    </div>
    
    <div class="report-section">
      <h3>质量报告</h3>
      <div class="reports">
        <div class="report-item" v-for="report in qualityReports" :key="report.id">
          <div class="report-header">
            <span class="report-title">{{ report.title }}</span>
            <span class="report-date">{{ report.date }}</span>
          </div>
          <div class="report-content">{{ report.summary }}</div>
          <button class="btn-default" @click="viewReport(report.id)">查看详情</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'QualityAnalysis',
  data() {
    return {
      dateRange: null,
      productId: '',
      totalTestCases: 0,
      passedCases: 0,
      failedCases: 0,
      passRate: 0,
      totalDefects: 0,
      openDefects: 0,
      qualityReports: [],
      passRateChart: null,
      defectDistributionChart: null,
      executionTrendChart: null,
      severityDistributionChart: null
    }
  },
  mounted() {
    this.initCharts()
    this.fetchQualityData()
  },
  beforeUnmount() {
    this.destroyCharts()
  },
  methods: {
    initCharts() {
      this.passRateChart = echarts.init(document.getElementById('passRateChart'))
      this.defectDistributionChart = echarts.init(document.getElementById('defectDistributionChart'))
      this.executionTrendChart = echarts.init(document.getElementById('executionTrendChart'))
      this.severityDistributionChart = echarts.init(document.getElementById('severityDistributionChart'))
    },
    destroyCharts() {
      if (this.passRateChart) this.passRateChart.dispose()
      if (this.defectDistributionChart) this.defectDistributionChart.dispose()
      if (this.executionTrendChart) this.executionTrendChart.dispose()
      if (this.severityDistributionChart) this.severityDistributionChart.dispose()
    },
    async fetchQualityData() {
      try {
        // 这里应该调用后端API获取质量分析数据
        // 暂时使用模拟数据
        this.totalTestCases = 1248
        this.passedCases = 1056
        this.failedCases = 192
        this.passRate = Math.round((this.passedCases / this.totalTestCases) * 100)
        this.totalDefects = 86
        this.openDefects = 32
        
        // 模拟质量报告
        this.qualityReports = [
          {
            id: 1,
            title: '每周质量报告 (2023-05-15 ~ 2023-05-21)',
            date: '2023-05-22',
            summary: '本周测试通过率85%，较上周提升3%，新发现缺陷12个，其中5个已解决。'
          },
          {
            id: 2,
            title: '每周质量报告 (2023-05-08 ~ 2023-05-14)',
            date: '2023-05-15',
            summary: '本周测试通过率82%，较上周下降2%，主要原因是新功能上线导致的兼容性问题。'
          }
        ]
        
        this.updateCharts()
      } catch (error) {
        this.$message.error('获取质量分析数据失败')
      }
    },
    updateCharts() {
      // 测试通过率趋势图
      const passRateOption = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}%'
          }
        },
        series: [{
          data: [78, 82, 79, 85, 88, 86, 89],
          type: 'line',
          smooth: true,
          lineStyle: {
            width: 3
          },
          itemStyle: {
            color: '#409eff'
          }
        }]
      }
      
      // 缺陷分布统计
      const defectDistributionOption = {
        tooltip: {
          trigger: 'item'
        },
        series: [{
          name: '缺陷分布',
          type: 'pie',
          radius: '60%',
          data: [
            { value: 32, name: 'UI问题' },
            { value: 24, name: '功能缺陷' },
            { value: 18, name: '性能问题' },
            { value: 12, name: '安全漏洞' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      }
      
      // 测试执行趋势
      const executionTrendOption = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['通过', '失败']
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '通过',
            data: [120, 180, 210, 280, 320],
            type: 'bar',
            itemStyle: {
              color: '#67c23a'
            }
          },
          {
            name: '失败',
            data: [30, 20, 40, 35, 45],
            type: 'bar',
            itemStyle: {
              color: '#f56c6c'
            }
          }
        ]
      }
      
      // 缺陷严重程度分布
      const severityDistributionOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['致命', '严重', '一般', '轻微']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [12, 24, 35, 15],
          type: 'bar',
          itemStyle: {
            color: function(params) {
              const colorList = ['#f56c6c', '#e6a23c', '#67c23a', '#409eff']
              return colorList[params.dataIndex]
            }
          }
        }]
      }
      
      this.passRateChart.setOption(passRateOption)
      this.defectDistributionChart.setOption(defectDistributionOption)
      this.executionTrendChart.setOption(executionTrendOption)
      this.severityDistributionChart.setOption(severityDistributionOption)
    },
    refreshData() {
      this.fetchQualityData()
      this.$message.success('数据已刷新')
    },
    viewReport(id) {
      this.$message.info(`查看报告${id}`)
    }
  }
}
</script>

<style scoped>
.quality-analysis-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.filters {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  align-items: center;
}

.btn-primary {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-default {
  background-color: #fff;
  color: #606266;
  border: 1px solid #dcdfe6;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.charts-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.chart-item {
  flex: 1;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chart-item h3 {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 500;
}

.stats-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.stat-item {
  flex: 1;
  background: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

.report-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.report-section h3 {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 500;
}

.reports {
  display: flex;
  gap: 20px;
}

.report-item {
  flex: 1;
  background: #f5f7fa;
  padding: 15px;
  border-radius: 6px;
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.report-title {
  font-weight: 500;
}

.report-date {
  color: #909399;
  font-size: 12px;
}

.report-content {
  margin-bottom: 10px;
  color: #606266;
  font-size: 14px;
}
</style>